<!-- 地铁线路与客运量对比统计 -->
<template>
    <div class="h-100 w-100">
        <div style="height: 80px;">
            <tablleBar @submit-swich="swichTable" :list="['地铁1-7号线','8、11、16号线、阳逻']" ></tablleBar>

        </div>
     <div style="height: calc( 100% - 80px);">
        <div id="dtxlykyl" class="w-100 " style="height: 100%;position: relative"> </div>
     </div>
    </div>

</template>
    
<script setup lang='ts'>
    import tablleBar from '@/components/project/tablleBar.vue';
import * as echarts from 'echarts'

    var yLabel0 = ['1号线','2号线','3号线','4号线','5号线','6号线','7号线'];
    var yLabel1 = ['8号线','11号线','13号线','16号线','阳逻线',];
var yData =[20, 18, 15, 13,20, 18, 15,];


// let option = {
//           grid: {
//                         left: '%',
//                         right: '1%',
//                         bottom: '10%',
//                         top: '1%',
//                         containLabel: true
//                  },
//           xAxis: {
//                         show: false,
//                         type: 'value'
//                     },
//           yAxis: [{
//                         type: 'category',
//                         inverse: true,
//                         axisLabel: {
//                             show: true,
//                             margin: 25,
//                             textStyle: {
//                                 color: '#00dcf1',
//                                 fontSize: 19,
//                                 fontFamily: 'siyuan',
//                                 fontStyle: 'italic'
//                             },

//                         },
//             // 设置自定义字体样式
//                         splitLine: {
//                             show: false
//                         },
//                         axisTick: {
//                             show: false
//                         },
//                         axisLine: {
//                             show: false
//                         },
//                         data: yLabel
//                     },
//                      {
//                         zlevel:3,
//                         type: 'category',
//                         inverse: true,
//                         axisTick: 'none',
//                         axisLine: 'none',
//                         show: true,
               
//                         axisLabel: {
//                             textStyle: {
//                                 color: 'rgba(92, 225, 255, 1)',
//                                 fontSize: '30',
//                                 padding: [0, 0, 0, -33],
//                                 fontFamily:'DIN-Bold',
//                                 offset:20
//                             },
//                         formatter: '{value} 个',


//                         },
//                         data: yData
//                     }],
//           series: [
            

//         // 其他设置
   
//                         {
//                             name: '人数',
//                             type: 'bar',
//                             zlevel: 3,
//                             itemStyle: {
//                                 normal: {
//                                     //barBorderRadius: [0, 30, 30, 0],
//                                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
//                                         offset: 0,
//                                         color: 'rgba(4,128,224,0.3)'
//                                     }, {
//                                         offset: 1,
//                                         color: '#01F1E4'
//                                     }]),
//                                     shadowBlur: 0,
//                                     shadowColor: 'rgba(87,220,222,0.7)'
//                                 },
//                             },
//                             barWidth: 15,
//                             data: yData
//                         },
                      
//                         { // 背景
//                             type: 'pictorialBar',
//                             animationDuration: 0,
//                             hoverAnimation: false,
//                             symbolRepeat: 'fixed',
//                             label:{
//                                 show:false,
//                                 position:['97%','40%'],
//                                 fontSize:20,
//                                 color: '#01F1E4',
//                             },
//                             legendHoverLink: false,
//                             symbolMargin: '10%',
//                             symbol: 'roundRect',
//                             symbolSize: [5, 35],
//                             itemStyle: {
//                                 normal: {
//                                     color: '#12272A',

//                                 }
//                             },
//                             data: yData,
//                             z: 0,
//                         },
//                     ]
// };
let option = {
  grid: {
                        left: '10%',
                        right: '1%',
                        bottom: '10%',
                        top: '10%',
                        containLabel: true
                 },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value}万次",
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    },
    nameTextStyle: {
      color: "#DEDEDE",
      fontSize: 12,
      padding: 10,
    },

    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed", //线的类型 虚线0
        opacity: 0.2, //透明度
      },
    },
  },
  xAxis: {
    type: "category",
    data: yLabel0,
    axisLabel: {
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    },
  },
  series: [
    {
      type: "bar",
      data: yData, // 示例数值数据
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(3, 230, 254, 1)", // 顶部颜色
          },
          {
            offset: 0.01,
            color: "rgba(3, 230, 254, 0)", // 接近底部的颜色
          },
          {
            offset: 1,
            color: "rgba(3, 230, 254, 1)", // 底部颜色，透明
          },
        ]),
      },
      barWidth: "40%", // 调整柱状图的宽度
    },
  ],
};
let myChart:any;
const activeItem=ref(0)
    const swichTable=(item:any)=>{
       activeItem.value=item
       if(activeItem.value==0){
      option.xAxis.data=yLabel0
      option.series[0].data=[20, 18, 15, 13,20, 18, 15,]


       }else{
        option.xAxis.data=yLabel1
      option.series[0].data=[22, 18, 15, 13,2]

       }
      myChart.setOption(option)
    }
onMounted(() => {
    myChart = echarts.init(document.getElementById("dtxlykyl") as HTMLElement);

    myChart.setOption(option)
})
</script>
    
<style>
    
</style>